<!-- 充值记录 -->
<template>
	<view class="container">
		<!-- 筛选条件区域 -->
		<view class="filter-box">
			<u-dropdown ref="uDropdown" :active-color="tColor">
				<u-dropdown-item v-model="params.type" title="操作类型" :options="[
            {label: '全部', value: 0},
            {label: '加款', value: 1},
            {label: '扣除', value: 2}
          ]" @change="refresh"></u-dropdown-item>
				<u-dropdown-item v-model="params.source_type" title="来源" :options="[
            {label: '全部', value: 0},
            {label: '人工', value: 1},
            {label: '系统', value: 2}
          ]" @change="refresh"></u-dropdown-item>
			</u-dropdown>

			<!-- 时间筛选 -->
			<scroll-view class="time-filter" scroll-x>
				<view v-for="(item, index) in timeOptions" :key="index" class="time-item"
					:class="{ active: timeActive === index }" @click="changeTime(index)">
					{{ item.label }}
				</view>
			</scroll-view>
		</view>

		<!-- 数据表格区域 -->
		<view class="data-table">
			<!-- 表头 -->
			<view class="table-header">
				<text class="header-cell">时间</text>
				<!-- <text class="header-cell">方式</text> -->
				<text class="header-cell">金额</text>
				<text class="header-cell">充值前</text>
				<text class="header-cell">充值后</text>
			</view>

			<!-- 表格内容 -->
			<view v-for="(item, index) in dataList" :key="index" class="table-row">
				<!-- 时间 -->
				<text class="table-cell">{{ item.add_time }}</text>
				<!-- 方式 -->
				<!-- <text class="table-cell">{{ item.source_type | formatSource }}</text> -->
				<!-- 金额 -->
				<text class="table-cell" :style="{ color: item.type === 1 ? '#09BE4F' : '#FF4B4B' }">
					{{ item.type === 1 ? '+' : '-' }}{{ item.amount }}
				</text>
				<!-- 充值前 -->
				<text class="table-cell">¥{{ item.before_amount }}</text>
				<!-- 充值后 -->
				<text class="table-cell">¥{{ item.after_amount }}</text>
			</view>

			<!-- 加载更多 -->
			<u-loadmore :status="loadingStatus" :load-text="{
          loadmore: '点击加载更多',
          loading: '正在加载',
          nomore: '没有更多了'
        }" />

			<!-- 空状态 -->
			<u-empty v-if="dataList.length === 0 && !loading" mode="list"
				icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
		</view>
	</view>
</template>

<script>
	import utils from '@/common/utils.js';
	export default {
		filters: {
			formatSource(val) {
				return ['', '人工', '系统'][val] || '未知'
			}
		},
		data() {
			return {
				params: {
					type: 0, // 对应接口的type参数
					source_type: 0, // 对应接口的source_type
					start_time: '',
					end_time: ''
				},
				timeOptions: [{
						label: '全部',
						value: 0
					},
					{
						label: '今天',
						value: 1
					},
					{
						label: '近7天',
						value: 7
					},
					{
						label: '本月',
						value: 30
					}
				],
				timeActive: 0,
				dataList: [],
				currentPage: 1,
				pageSize: 10,
				total: 0,
				loading: false,
				loadingStatus: 'loadmore'
			}
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			if (this.currentPage * this.pageSize < this.total) {
				this.currentPage++
				this.getList()
			}
		},
		methods: {
			// 生成时间范围
			generateTimeRange(days) {
				const end = new Date()
				const start = new Date()
				start.setDate(start.getDate() - days)

				start.setHours(0, 0, 0, 0)
				end.setHours(23, 59, 59, 999)

				return {
					start_time: Math.floor(start.getTime() / 1000),
					end_time: Math.floor(end.getTime() / 1000)
				}
			},

			// 切换时间筛选
			changeTime(index) {
				this.timeActive = index
				const days = this.timeOptions[index].value

				if (days === 0) {
					this.params.start_time = ''
					this.params.end_time = ''
				} else {
					const timeRange = this.generateTimeRange(days)
					this.params.start_time = timeRange.start_time
					this.params.end_time = timeRange.end_time
				}
				this.refresh()
			},

			// 刷新数据
			refresh() {
				this.currentPage = 1
				this.dataList = []
				this.getList()
			},

			// 获取数据
			async getList() {
				if (this.loading) return
				this.loading = true
				this.loadingStatus = 'loading'

				try {
					const res = await this.util
						.request({
							url: this.api.czjl,
							method: 'GET',
							data: {
								...this.params,
								page: this.currentPage,
								size: this.pageSize
							}
						})
					if (res.code == 1) {
						this.dataList = [...this.dataList, ...res.data]
						this.total = res.data.length

						this.loadingStatus = this.currentPage * this.pageSize < this.total ?
							'loadmore' :
							'nomore'
					} else {
						uni.showToast({
							title: res.data.msg || '请求失败',
							icon: 'none'
						})
					}
				} catch (error) {
					uni.showToast({
						title: '网络错误',
						icon: 'none'
					})
					console.log(error)
				} finally {
					this.loading = false
				}
			}
		}
	}
</script>


<style lang="scss" scoped>
	.container {
		background: #fff;
		padding: 20rpx;

		.filter-box {
			border-bottom: 1px solid #eee;
			// padding-bottom: 20rpx;

			.time-filter {
				white-space: nowrap;
				padding: 20rpx 0;

				.time-item {
					display: inline-block;
					padding: 10rpx 30rpx;
					margin-right: 20rpx;
					border-radius: 8rpx;
					background: #f5f5f5;
					color: #666;

					&.active {
						background: #fe9367;
						color: #fff;
					}
				}
			}
		}

		.data-table {
			margin-top: 8rpx;

			.table-header {
				display: flex;
				padding: 20rpx 0;
				border-bottom: 2rpx solid #fe9367;

				.header-cell {
					flex: 1;
					text-align: center;
					font-weight: bold;
					color: #333;
				}
			}

			.table-row {
				display: flex;
				padding: 25rpx 0;
				border-bottom: 1rpx solid #eee;

				.table-cell {
					flex: 1;
					text-align: center;
					font-size: 28rpx;
					color: #666;
				}
			}
		}
	}
</style>